<template>
    <div class="wrapper">
        <div class="title">热销推荐</div>
        <ul>
        <router-link tag='li' :to='"/detail/" + item.id' class="mainBox border-bottom" v-for='item in recommend' :key='item.id'>
                <img :src="item.imgUrl" alt="">
                <div class="item" border-bottom>
                    <h3 class="item-title">{{item.title}}</h3>
                    <div class="item-content">{{item.desc}}</div>
                    <button class="item-btn">查看详情</button>
                </div>
        </router-link>
        </ul>
    </div>
</template>
<script>
export default {
    props:{
        recommend:Array
    }
}
</script>
<style lang="stylus" scoped>
    .wrapper
        width 100%
        margin-top .2rem
        .title
            width 100%
            line-height .7rem
            background #dbdbdb
            text-indent .2rem
        .mainBox
            width 100%
            display flex
            padding .2rem
            img 
                display block
                width 2rem
                height 2rem
            .item
                flex 1
                padding-left .2rem
                .item-title
                    line-height .6rem
                    font-weight bold
                .item-content
                    line-height .5rem
                .item-btn
                    width 2rem
                    line-height .5rem                
                    background #f60
                    border-radius .1rem
                    margin-top .3rem
                    color #fff
                    text-align center


</style>        



